<template>
	<view>
		<view class="u-flex u-flex-wrap">
			<u-image :width="index==0||index==3?'50%':'25%'" height="200rpx" :show-loading='false' :src="item.src"
				v-for='(item,index) in topList' :key='index'
				@click="$u.route('/pages/shop/webview/webview',{id:item.id})"></u-image>
		</view>
		<view class="u-p-20">
			<u-section title="热门推荐" :right="false" :show-line='false'></u-section>
		</view>
		<view class="u-p-l-20 u-p-r-20">
			<view v-for="(item,index) in hotList" :key="index">
				<w-shop-item :item='item'></w-shop-item>
			</view>
			<view class="u-text-center u-p-10 u-light-color u-font-36" @click="$u.route('/pages/shop/search/search',{type:'热门商品'})">
				查看更多>>
			</view>
		</view>
		<view class="u-p-20">
			<u-section title="新品推荐" :right="false" :show-line='false'></u-section>
		</view>
		<view class="u-p-l-20 u-p-r-20">
			<view v-for="(item,index) in newList" :key="index">
				<w-shop-item :item='item'></w-shop-item>
			</view>
			<view class="u-text-center u-p-10 u-light-color u-font-36" @click="$u.route('/pages/shop/search/search',{type:'新品推荐'})">
				查看更多>>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTopicList,getGoodsSearchNew,getGoodsSearchHot
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		name: "w-shop-recommend",
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				topList: [],
				newList:[],
				hotList:[]
			};
		},
		mounted() {
			this.getTopicList()
			this.getGoodsSearchNew()
			this.getGoodsSearchHot()
		},
		methods: {
			getGoodsSearchHot(){
				getGoodsSearchHot({pageNo:1,pageSize:5}).then(res=>{
					this.hotList = res.list.map(item=>{
						return {
							src: $shopImgUrl + item.pic,
							...item
						}
					})
				})
			},
			getGoodsSearchNew(){
				getGoodsSearchNew({pageNo:1,pageSize:5}).then(res=>{
					this.newList = res.list.map(item=>{
						return {
							src: $shopImgUrl + item.pic,
							...item
						}
					})
				})
			},
			getTopicList() {
				this.topList = []
				getTopicList().then(res => {
					res.map(item => {
						this.topList.push({
							id: item.id,
							src: $shopImgUrl + item.article.img
						})
					})
					if (this.topList.length > 6) {
						this.topList.length = 6
					}
				})
			}
		},
	}
</script>

<style lang="scss">

</style>
